<template>
  <a-card>
    <div class="search">
      <a-form layout="horizontal">
        <div class="fold">
          <a-row>
            <a-col :md="12" :sm="24">
              <a-form-item
                  label="系统账号"
                  :labelCol="{span: 5}"
                  :wrapperCol="{span: 18, offset: 1}"
              >
                <a-input v-model="queryParam.loginNameLike" placeholder="请输入"/>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <span style="float: right; margin-top: 3px;">
              <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
              <a-button style="margin-left: 8px" @click="resetSearchForm">重置</a-button>
              <a-button type="primary" icon="plus" @click="$refs.createModal.add()">新建</a-button>
              </span>
            </a-col>
          </a-row>
        </div>
      </a-form>
    </div>
    <div>

      <s-table
          ref="table"
          size="default"
          :rowKey="(record) => record.id"
          :columns="columns"
          :data="loadData"
          :alert="options.alert"
          :rowSelection="options.rowSelection"
          bordered
          showPagination="auto"
          :pageSize="10"
          :pagination="{
            showQuickJumper: true,
            showTotal: (totalSize, range) => `共 ${totalSize} 条`
          }"
          :scroll="{x: scrollX}"
      >
        <!--操作-->
        <span slot="action" slot-scope="text, record">
            <span>
              <a class="mr10" @click="$refs.createModal.edit(record)">编辑</a>
              <a-popconfirm
                  title="Are you sure delete this user?"
                  ok-text="Yes"
                  cancel-text="No"
                  @confirm="confirm(record)"
                  @cancel="cancel">
              <a class="mr10" href="#">删除</a>
              </a-popconfirm>

            </span>

        </span>
      </s-table>

      <user-form ref="createModal" :roles="roles" @ok="handleOk"></user-form>
    </div>

  </a-card>
</template>

<script>
import {deleteUserById, queryRoleList, queryUserList} from '@/services/user'
import UserForm from './UserForm'

export default {
  name: 'QueryList',
  components: {UserForm},
  data() {
    return {
      queryParam: {loginNameLike: ''},
      advanced: true,
      columns: [
        {title: '操作', dataIndex: 'action', width: 190, scopedSlots: {customRender: 'action'}, fixed: 'left'},
        {title: '编号', dataIndex: 'id', width: 100, sorter: true},
        {title: '登录名', dataIndex: 'username', width: 400},
        {title: '名称', dataIndex: 'realName', width: 200},
        {title: 'email', dataIndex: 'email', width: 300, sorter: true},
        {title: '注册时间', dataIndex: 'regDate', sorter: true}
      ],
      selectedRows: [],
      roles: [],
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        return queryUserList({...parameter, ...this.queryParam}).then(res => {
          return res && res.data.data
        })
      },
      selectedRowKeys: [],
      options: {
        alert: {
          show: false,
          clear: () => {
            this.selectedRowKeys = []
          }
        },
        rowSelection: {
          selectedRowKeys: this.selectedRowKeys,
          onChange: this.onSelectChange
        }
      },
    }
  },
  methods: {
    resetSearchForm() {
      this.queryParam = {loginNameLike: ''}
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    // 关闭弹层刷新表格
    handleOk(flag = true) {
      this.$refs.table.refresh(flag)
      this.$refs.table.clearSelected()
    },
    confirm(e) {
      deleteUserById({id: e.id}).then(res => {
        const {
          message, code
        } = res.data
        if (200 === code) {
          this.$refs.table.refresh(true)
          this.$message.success(message)
        } else {
          this.$message.error(message)
        }
      }).catch(({message}) => {
        this.$message.error(message)
        // eslint-disable-next-line no-unused-vars
      }).finally(() => {

      })
    },
    cancel() {
    },
  },
  mounted() {
    queryRoleList({pageSize: 500, current: 1}).then(res => {
      this.roles = res.data.data.records
    }).catch(() => {
    }).finally(() => {
    })
  },
  created() {
  },
  computed: {
    scrollX() {
      return this.columns.reduce((prev, cur) => {
        return prev + (cur.width || 240)
      }, 0)
    }
  }
}
</script>

<style lang="less" scoped>
.search {
  margin-bottom: 4px;
}

.mr10 {
  margin-right: 10px !important;
}

.fold {
  width: calc(100% - 216px);
  display: inline-block
}

.ant-form-item {
  margin-bottom: 0px;
}

@media screen and (max-width: 900px) {
  .fold {
    width: 100%;
  }
}
</style>
